<template>
   <div id="app">
    <van-nav-bar
      title="搜索商品"
      left-text="返回"
     
      left-arrow
      @click-left="onClickLeft"
    
    />
        <div class="searchbox">
            <input type="text" class="kuang" v-model="searchText" >
            <span @click="search" >搜索</span>
        </div>
        <div class="block">
              <div class="title">历史搜索</div>
              <div>
                   <span v-for="(item,index) in searchArr" :key="index">{{item}}</span>
        
              </div>
        </div>
        
    </div>
</template>

<script>
// import { stringify } from 'querystring'
import {shop_search} from "../../utils/api"
export default {
  
    
    data(){
        return{
            searchText:"",
            searchArr:[
        //    "过桥米线","火锅","面条"
        ],
            searchdata:[]


        }
    },
    methods: {
        onClickLeft() {
      this.$router.go(-1);
    },
        search(){
        //     if(this.searchText!=""){
        //             console.log(this.searchText)
        //    this.searchArr.push(this.searchText)
        //    this.searchText=""
        //     }
        console.log(this.searchText);
        shop_search(
{searchkey:this.searchText}
)
        .then(res=>{
            console.log(res.data.list);
            this.searchdata=res.data.list
            console.log("this.searchdata",this.searchdata);
            this.$router.push({
            name:'detail',
             params:{
                 searchdata:this.searchdata
                }
        })
        })
        // this.$router.push(`/xiangq?searchdata=${this.searchdata}`)
        
       
        },
        
    },

    
}

</script>

<style lang="scss" scoped>
 *{
         margin: 0;
         padding: 0;
     }

     .app{
         width: 100%;
         height: 300px;
     }
     #app .searchbox{
         display: flex;
         /* justify-content: ; */
         margin-top: 20px;
         margin-bottom: 15px;
     }
     #app .searchbox input{
           width: 80%;
           height: 30px;
           display: block;
           background-color: #999;
           border-radius:10px;
           outline: none;
           border: none;
     }

     #app .searchbox span{
         color: skyblue;
         font-size: 20px;
         display: block;
         width: 20%;
         height: 30px;
         line-height: 30px;
           text-align: center;
           
     }

     .block{
         width: 100%;
     }
     .block .title{
         font-size: 20px;
         color: black;
         margin-bottom: 15px;
     }

     .block span{
         display:inline-block;
         padding: 10px;
         margin: 10px;
         margin: 10px;
         background-color: #999;
         border-radius:10px ;
     }
</style>